<template>
  <div>
    <div class="empty-page" v-if="!goodsList.length">
      <img src="./../../assets/images/empty.png">
      <p class="text">抱歉，此页面暂无数据哦～</p>
    </div>
    <div class="list-page" v-else>
      <!-- 面包屑导航 -->
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right" v-if="!noScreen && params">
        <el-breadcrumb-item>全部</el-breadcrumb-item>
        <el-breadcrumb-item>{{currentCate.categoryName}}</el-breadcrumb-item>
        <!-- 分类属性 -->
        <el-breadcrumb-item v-if="params.attrs && params.attrs.length" v-for="(attr, index) in params.attrs" :key="index">
          <v-selecter :cateId="categoryId" :attrKey="attr.pAttrId" :attrVal="attr.sonAttr" @clear-attr="clearAttr"></v-selecter>
        </el-breadcrumb-item>
        <!-- 品牌 -->
        <el-breadcrumb-item v-if="params.brands && params.brands.length">
          <v-selecter :cateId="categoryId" :brands="params.brands" @clear-brand="clearBrand"></v-selecter>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 多重筛选 -->
      <div class="screen-wrapper" v-if="!noScreen && params">
        <!-- 分类属性筛选 -->
        <div class="screen-box clearfix" v-for="(attr, index) in currentCate.categoryAttribute" v-if="attr.sonAttribute && attr.sonAttribute.length" :key="index">
          <span class="attr-tit">{{attr.parentAttribute.value}}：</span>
          <ul class="attr-list row">
            <li class="attr-item" v-for="(sAttr, index1) in attr.sonAttribute" :key="index1">
              <el-checkbox class="attr-checkbox" :checked="sAttr.checked" v-if="attr.parentAttribute.multiple || attr.parentAttribute.checkable" :disabled="!attr.parentAttribute.multiple" @change="selectAttr(sAttr)">{{sAttr.value}}</el-checkbox>
              <span class="attr-name" v-else @click="singleSelAttr(sAttr)">{{sAttr.value}}</span>
            </li>
          </ul>
          <div class="btn-group">
            <!-- <el-button size="mini" class="btn-slide" @click="toggle(attr)">收起<i class="el-icon-arrow-down el-icon--right"></i></el-button> -->
            <el-button size="mini" class="btn-multiple" icon="el-icon-plus" @click="multiple(attr)" plain>多选</el-button>
          </div>
          <div class="tool-bar" v-if="attr.parentAttribute.multiple">
            <el-button type="danger" size="mini" v-if="attr.parentAttribute.checkout" @click="confirmSelected">确定</el-button>
            <el-button type="info" size="mini" @click="cancelSelAttr(attr.parentAttribute.attributeId)">取消</el-button>
          </div>
        </div>
        <!-- 品牌筛选 -->
        <div class="screen-box clearfix" v-if="currentCate.categoryBrands && currentCate.categoryBrands.length">
          <span class="attr-tit">品牌：</span>
          <ul class="attr-list row">
            <li class="attr-item" v-for="(brand, index) in currentCate.categoryBrands" :key="index">
              <el-checkbox class="attr-checkbox" :checked="brand.checked" v-if="currentCate.multiple || currentCate.checkable" :disabled="!currentCate.multiple" @change="selectBrand(brand)">{{brand.brandName}}</el-checkbox>
              <span class="attr-name" v-else @click="singleSelBrand(brand)">{{brand.brandName}}</span>
            </li>
          </ul>
          <div class="btn-group">
            <el-button size="mini" class="btn-multiple" icon="el-icon-plus" @click="multipleBrand" plain>多选</el-button>
          </div>
          <div class="tool-bar" v-if="currentCate.multiple">
            <el-button type="danger" size="mini" v-if="currentCate.checkout" @click="confirmSelected">确定</el-button>
            <el-button type="info" size="mini" @click="cancelSelBrand">取消</el-button>
          </div>
        </div>
      </div>
      <!-- 工具栏 -->
      <div class="tool-wrapper clearfix">
        <div class="btn-group">
          <div class="btn" :class="{'active': queryway == 1}" @click="setQueryWay(1)">
            <span class="text">综合</span>
          </div>
          <div class="btn" :class="{'active': queryway == 2}" @click="setQueryWay(2)">
            <span class="text">折扣</span>
            <i class="icon el-icon-caret-top" v-if="sortway === 'asc'"></i>
            <i class="icon el-icon-caret-bottom" v-if="sortway === 'desc'"></i>
          </div>
          <div class="btn" :class="{'active': queryway == 3}" @click="setQueryWay(3)">
            <span class="text">店铺</span>
          </div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="list-wrapper">
        <ul class="goods-list row" v-if="queryway != 3">
          <li class="goods-item col-3" v-for="(item, index) in goodsList" :key="index">
            <router-link class="product-box" target="_blank" :to="'/goods/goodsDetail?productId=' + item.productId">
              <img :src="item.productCover" class="product-img" width="100%">
              <div class="product-info">
                <div class="sell">
                  <span class="discount">{{item.minDiscount ? item.minDiscount : '?'}}折</span>
                  <span class="sell-price">
                    <em>¥</em>
                    <span v-if="item.minSellPrice">{{item.minSellPrice | priceFormat1}}</span>
                    <span v-else>?</span>
                    <i class="sell-type">/{{item.attributeName}}</i>
                  </span>
                  <span class="orignal-price">¥ {{item.orginalPrice | priceFormat1}}</span>
                </div>
                <div class="name">{{item.productName}}</div>
                <div class="clearfix">
                  <router-link :to="'/store/storeInfo?storeId=' + item.storeId" class="store clearfix">{{item.storeName}}</router-link>
                </div>
                <div class="pro-grade-name" v-if="item.proGradeName">{{item.proGradeName}}</div>
                <div class="discounts clearfix" v-if="item.activity">
                  <div class="tag-group" v-if="item.activity.isMore === '1'">
                    <span class="tag" v-for="(tag, index1) in item.activity.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
                  </div>
                  <div class="tag-group" v-else>
                    <span class="tag">{{item.activity.activityName}}</span>
                  </div>
                </div>
              </div>
              <div class="keywords">
                <span v-if="item.k1" class="w1">{{item.k1}}</span>
                <span v-if="item.k2" class="w2"><i class="text">{{item.k2}}</i></span>
                <span v-if="item.k3" class="w3">{{item.k3}}</span>
              </div>
            </router-link>
          </li>
        </ul>
        <!-- 店铺列表 -->
        <ul class="store-list" v-else>
          <li class="store-item" v-for="(store, index) in storeList" :key="index">
            <div class="store-box clearfix">
              <div class="logo"><img :src="store.storeLogo" width="140" height="140"></div>
              <div class="info">
                <p class="store-name">{{store.storeName}}</p>
                <p class="store-local">所在地：{{store.areaName}}</p>
                <div class="btn-group">
                  <el-button size="mini" icon="el-icon-plus" v-if="store.isStore == 0" @click="follow(store)">关注</el-button>
                  <el-button size="mini" v-if="store.isStore == 1" @click="unfollow(store)">取消关注</el-button>
                  <el-button type="primary" size="mini" @click="goToStore(store.id)">进入店铺</el-button>
                </div>
              </div>
            </div>
            <ul class="goods-list row" style="margin-left: 20px; margin-right: 20px;">
              <li class="goods-item col-3" v-for="(item, index1) in store.products" :key="index1">
                <router-link class="product-box" :to="'/goods/goodsDetail?productId=' + item.productId">
                  <div class="product-img">
                    <img :src="item.productCover" class="product-img" width="100%">
                  </div>
                  <div class="product-info">
                    <div class="sell">
                      <span class="discount">{{item.minDiscount ? item.minDiscount : '?'}}折</span>
                      <span class="sell-price">
                        <em>¥</em>
                        <span v-if="item.minSellPrice">{{item.minSellPrice | priceFormat1}}</span>
                        <span v-else>?</span>
                        <i class="sell-type">/{{item.attributeName}}</i>
                      </span>
                      <span class="orignal-price">¥ {{item.orginalPrice | priceFormat1}}</span>
                    </div>
                    <div class="name">{{item.productName}}</div>
                    <div class="clearfix">
                      <router-link :to="'/store/storeInfo?storeId=' + item.storeId" class="store clearfix">{{item.storeName}}</router-link>
                    </div>
                    <div class="pro-grade-name" v-if="item.proGradeName">{{item.proGradeName}}</div>
                    <div class="discounts clearfix" v-if="item.activity">
                      <div class="tag-group" v-if="item.activity.isMore === '1'">
                        <span class="tag" v-for="(tag, index1) in item.activity.type" :key="index1">{{FavourableActivityTypes.Types[tag]}}</span>
                      </div>
                      <div class="tag-group" v-else>
                        <span class="tag">{{item.activity.activityName}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="keywords">
                    <span v-if="item.k1" class="w1">{{item.k1}}</span>
                    <span v-if="item.k2" class="w2"><i class="text">{{item.k2}}</i></span>
                    <span v-if="item.k3" class="w3">{{item.k3}}</span>
                  </div>
                </router-link>
              </li>
            </ul>
          </li>
        </ul>
        <v-pagination ref="pagination" v-if="total" :pg="page" :size="pageSize" :total="total" @page-change="pageChange"></v-pagination>
      </div>
      <!-- 查看价格 -->
      <vTools/>
    </div>
  </div>
</template>

<script>
import { arrMap } from '@/util/match'
import { FavourableActivityTypes } from '@/util/enums'
import { getAreaName } from '@/util/getAreaName'
import vPagination from '@/components/public/pagination'
import vSelecter from '@/components/public/selecter'
import vTools from '@/components/layout/tools'

export default {
  data () {
    return {
      params: JSON.parse(window.localStorage.getItem('goodsParams')), // 从localStorage中取出参数
      noScreen: Boolean(this.$route.query.screen), // 是否不能筛选
      categoryList: JSON.parse(window.localStorage.getItem('categoryList')), // 分类列表
      categoryId: '', // 分类id
      currentCate: {}, // 当前分类
      productName: this.$route.query.pname || '', // 商品名称
      queryway: 1, // 搜索方式 {1: 综合； 2: 折扣；3:店铺}
      sortway: '', // 是否按折扣升序排列
      FavourableActivityTypes: FavourableActivityTypes, // 优惠类型
      goodsList: [],
      storeList: [],
      page: this.$route.query.pg || 1,
      pageSize: 20,
      total: 0,
      loading: false
    }
  },
  components: {
    vSelecter,
    vPagination,
    vTools
  },
  computed: {
    // 计算已选择的分类属性-属性值
    selectedAttrs () {
      if (this.currentCate.categoryAttribute) {
        let selected = []
        this.currentCate.categoryAttribute.forEach(attr => {
          attr.sonAttribute.forEach(son => {
            if (son.checked) {
              selected.push(son)
            }
          })
        })
        let selArray = arrMap(selected)
        selArray.forEach(item => {
          for (const key in item) {
            if (item.hasOwnProperty(key) && key === 'parentAttrId') {
              item.pAttrId = item[key]
              item.sonAttribute.forEach(son => {
                for (const key1 in son) {
                  if (son.hasOwnProperty(key1)) {
                    switch (key1) {
                      case 'attributeId':
                        son.attrId = son[key1]
                        break
                      case 'value':
                        son.attrName = son[key1]
                        break
                    }
                  }
                }
              })
              item.sonAttr = item.sonAttribute
            }
          }
        })
        let param = {
          cateId: this.categoryId,
          attrs: selArray
        }
        return param
      } else {
        return false
      }
    },
    // 计算已选择的品牌
    selectedBrands () {
      if (this.currentCate.categoryBrands) {
        let selBrands = []
        this.currentCate.categoryBrands.forEach(brand => {
          if (brand.checked) {
            selBrands.push({
              brandId: brand.brandId,
              brandName: brand.brandName
            })
          }
        })
        let param = {
          cateId: this.categoryId,
          brands: selBrands
        }
        return param
      } else {
        return false
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 初始化
    init () {
      // 重新获取参数
      this.params = JSON.parse(window.localStorage.getItem('goodsParams'))
      if (this.params) {
        // 设置分类id并判断是否需要绑定筛选条件值
        this.categoryId = this.params.cateId
        if (!this.noScreen) {
          this.categoryList.forEach(item => {
            item.categoryAttribute.forEach(attr => {
              this.$set(attr.parentAttribute, 'multiple', false) // 绑定多选按钮
              this.$set(attr.parentAttribute, 'checkable', false) // 绑定是否可以选择
              this.$set(attr.parentAttribute, 'checkout', false) // 绑定确定按钮
              attr.sonAttribute.forEach(son => {
                this.$set(son, 'checked', false) // 绑定筛选项checkbox
              })
            })
            this.$set(item, 'multiple', false) // 绑定品牌多选按钮
            this.$set(item, 'checkable', false) // 绑定品牌是否可以选择
            this.$set(item, 'checkout', false) // 绑定品牌确定按钮
            item.categoryBrands.forEach(brand => {
              this.$set(brand, 'checked', false) // 绑定筛选项checkbox
            })
            // 设置当前分类
            if (item.categoryId === Number(this.categoryId)) {
              this.currentCate = item
            }
          })
          // 渲染已经勾选都筛选项
          if (this.params.attrs && this.params.attrs.length) {
            this.currentCate.categoryAttribute.forEach(cate => {
              this.params.attrs.forEach(attr => {
                if (cate.parentAttribute.attributeId === Number(attr.pAttrId)) {
                  cate.parentAttribute.checkable = true
                  cate.sonAttribute.forEach(son => {
                    if (Array.isArray(attr.sonAttr)) {
                      attr.sonAttr.forEach(sonAttr => {
                        if (son.attributeId === Number(sonAttr.attrId)) {
                          son.checked = true
                        }
                      })
                    } else {
                      if (son.attributeId === Number(attr.sonAttr.attrId)) {
                        son.checked = true
                      }
                    }
                  })
                }
              })
            })
          }
          if (this.params.brands && this.params.brands.length) {
            this.currentCate.categoryBrands.forEach(cate => {
              this.params.brands.forEach(brand => {
                if (cate.brandId === Number(brand.brandId)) {
                  cate.checked = true
                  this.currentCate.checkable = true
                }
              })
            })
          }
        }
      }
      // 判断通过那种方式查询商品
      if (this.queryway === 3) {
        this.getStoreList()
      } else {
        this.getGoodsList()
      }
    },
    // 设置多选 -- 属性
    multiple (attr) {
      this.currentCate.categoryAttribute.forEach(item => {
        if (item.parentAttribute.attributeId === attr.parentAttribute.attributeId) {
          item.parentAttribute.multiple = !attr.parentAttribute.multiple
        }
      })
    },
    // 设置多选 -- 品牌
    multipleBrand () {
      this.currentCate.multiple = !this.currentCate.multiple
    },
    // 选取筛选项 -- 属性
    selectAttr (sonAttr) {
      this.currentCate.categoryAttribute.forEach(item => {
        if (item.parentAttribute.attributeId === sonAttr.parentAttrId) {
          item.sonAttribute.forEach(son => {
            if (son.attributeId === sonAttr.attributeId) {
              son.checked = !son.checked
            }
          })
        }
      })
      this.countSelAttr(sonAttr.parentAttrId, sonAttr.attributeId)
    },
    // 单选分类属性
    singleSelAttr (sAttr) {
      this.currentCate.categoryAttribute.forEach(item => {
        if (item.parentAttribute.attributeId === sAttr.parentAttrId) {
          item.sonAttribute.forEach(son => {
            if (son.attributeId === sAttr.attributeId) {
              son.checked = !sAttr.checked
            } else {
              son.checked = false
            }
          })
        }
      })
      this.countSelAttr(sAttr.parentAttrId, sAttr.attributeId)
      this.confirmSelected()
    },
    // 选取筛选想 -- 品牌
    selectBrand (brand) {
      this.currentCate.categoryBrands.forEach(item => {
        if (item.brandId === brand.brandId) {
          item.checked = !item.checked
        }
      })
      this.countSelBrand()
    },
    // 单选品牌
    singleSelBrand (brand) {
      this.currentCate.categoryBrands.forEach(item => {
        if (item.brandId === brand.brandId) {
          item.checked = !item.checked
        } else {
          item.checked = false
        }
      })
      this.countSelBrand()
      this.confirmSelected()
    },
    // 计算筛选项个数 -- 属性
    countSelAttr (pid, sid) {
      this.currentCate.categoryAttribute.forEach(item => {
        if (item.parentAttribute.attributeId === pid) {
          if (item.sonAttribute.every(son => son.checked === false)) {
            item.parentAttribute.checkout = false
          } else {
            item.parentAttribute.checkout = true
          }
        }
      })
    },
    // 计算筛选项个数 -- 品牌
    countSelBrand () {
      if (this.currentCate.categoryBrands.every(item => item.checked === false)) {
        this.currentCate.checkout = false
      } else {
        this.currentCate.checkout = true
      }
    },
    // 确定筛选项
    confirmSelected () {
      let param = {
        cateId: this.currentCate.categoryId
      }
      if (this.selectedAttrs.attrs.length) {
        param.attrs = this.selectedAttrs.attrs
      }
      if (this.selectedBrands.brands.length) {
        param.brands = this.selectedBrands.brands
      }
      this.page = 1
      this.$store.commit('setGoodsParams', param)
      let time = Date.parse(new Date())
      this.$router.push('/goods/goodsList?time=' + time)
    },
    // 取消筛选 -- 属性
    cancelSelAttr (pid) {
      this.currentCate.categoryAttribute.forEach(item => {
        if (item.parentAttribute.attributeId === pid) {
          item.sonAttribute.forEach(son => {
            son.checked = false
          })
          item.parentAttribute.checkout = false
          item.parentAttribute.multiple = false
        }
      })
    },
    // 取消筛选 -- 品牌
    cancelSelBrand () {
      this.currentCate.categoryBrands.forEach(brand => {
        brand.checked = false
      })
      this.currentCate.multiple = false
      this.currentCate.checkout = false
    },
    // 切换商品排序方式
    setQueryWay (index) {
      this.page = 1
      if (index === 2) {
        switch (this.sortway) {
          case 'asc':
            this.sortway = 'desc'
            break
          case 'desc':
            this.sortway = ''
            break
          default:
            this.sortway = 'asc'
            break
        }
      }
      this.queryway = index
      if (index === 3) {
        this.getStoreList()
      } else {
        this.getGoodsList()
      }
    },
    // 搜索商品
    getGoodsList () {
      this.goodsList = []
      // 判断是否通过商品名称查询
      if (this.productName && this.noScreen) {
        let param = {
          page: this.page || 1,
          pageSize: 20,
          discountSort: this.sortway || '',
          productName: this.productName
        }
        this.$http.post(this.$api + '/pc/product/productList', param).then(res => {
          if (res.responseCode === '0000') {
            res.data.list.forEach(item => {
              if (item.keyWords) {
                let arr = item.keyWords.split(',')
                item.k1 = arr[0] || ''
                item.k2 = arr[1] || ''
                item.k3 = arr[2] || ''
              }
            })
            this.goodsList = res.data.list
            this.total = res.data.total
          }
        })
      } else {
        let param = {
          page: this.page,
          pageSize: this.pageSize,
          discountSort: this.sortway,
          categoryId: this.categoryId || '',
          brandIds: '',
          attributeIds: '',
          productName: this.productName || ''
        }
        if (this.params && this.params.brands && this.params.brands.length) {
          let barr = []
          this.params.brands.forEach(brand => {
            barr.push(brand.brandId)
          })
          param.brandIds = barr.join(',')
        }
        let arr = []
        if (this.params && this.params.attrs && this.params.attrs.length) {
          this.params.attrs.forEach(attr => {
            if (Array.isArray(attr.sonAttr)) {
              attr.sonAttr.forEach(son => {
                arr.push(son.attrId)
              })
            } else {
              arr.push(attr.sonAttr.attrId)
            }
          })
          param.attributeIds = arr.toString()
        }
        this.$http.post(this.$api + '/pc/product/productList', param).then(res => {
          if (res.responseCode === '0000') {
            res.data.list.forEach(item => {
              if (item.keyWords) {
                let arr = item.keyWords.split(',')
                item.k1 = arr[0] || ''
                item.k2 = arr[1] || ''
                item.k3 = arr[2] || ''
              }
            })
            this.goodsList = res.data.list
            this.total = res.data.total
          }
        })
      }
    },
    // 搜索店铺列表
    getStoreList () {
      return new Promise(resolve => {
        let param = {
          categoryId: this.categoryId || '',
          storeName: this.$route.query.pname || '',
          brandIds: '',
          page: this.page,
          pageSize: this.pageSize
        }
        if (this.params && this.params.brands && this.params.brands.length) {
          let barr = []
          this.params.brands.forEach(brand => {
            barr.push(brand.brandId)
          })
          param.brandIds = barr.join(',')
        }
        let arr = []
        if (this.params && this.params.attrs && this.params.attrs.length) {
          this.params.attrs.forEach(attr => {
            if (Array.isArray(attr.sonAttr)) {
              attr.sonAttr.forEach(son => {
                arr.push(son.attrId)
              })
            } else {
              arr.push(attr.sonAttr.attrId)
            }
          })
        }
        param.attributeIds = arr.toString()
        this.$http.post(this.$api + '/pc/product/storeList', param).then(res => {
          if (res.responseCode === '0000') {
            res.data.list.forEach(item => {
              // 设置发货地址
              let area = []
              if (item.province) {
                area.push(item.province)
                if (item.city) {
                  area.push(item.city)
                }
              }
              item.products.forEach(good => {
                if (good.keyWords) {
                  let krr = good.keyWords.split(',')
                  good.k1 = krr[0] || ''
                  good.k2 = krr[1] || ''
                  good.k3 = krr[2] || ''
                }
              })
              item.areaName = getAreaName(area)
            })
            this.storeList = res.data.list
            this.total = res.data.total
          }
        })
        return resolve()
      })
    },
    // 清除分类属性筛选
    clearAttr (attrId) {
      this.currentCate.categoryAttribute.forEach(attr => {
        if (attr.parentAttribute.attributeId === attrId) {
          attr.parentAttribute.checkable = false
          attr.parentAttribute.checkout = false
          attr.parentAttribute.multiple = false
          attr.sonAttribute.forEach(son => {
            son.checked = false
          })
        }
      })
      this.confirmSelected()
    },
    // 清除品牌筛选
    clearBrand () {
      this.currentCate.checkable = false
      this.currentCate.checkout = false
      this.currentCate.multiple = false
      this.currentCate.categoryBrands.forEach(item => {
        item.checked = false
      })
      this.confirmSelected()
    },
    // 关注店铺
    follow (store) {
      if (this.$store.state.user.PCToken) {
        if (!this.loading) {
          this.loading = true
          this.$http.post(this.$api + '/pc/product/addOrDeleteStore', {
            storeId: store.id,
            type: 1 // 判断是否已关注，Type枚举：{1: 关注； 2: 取消关注}
          }).then(res => {
            if (res.responseCode === '0000') {
              this.$message({
                type: 'success',
                duration: this.$store.state.duration,
                message: res.responseMsg,
                onClose: () => {
                  this.getStoreList().then(() => {
                    this.loading = false
                  })
                }
              })
            } else if (res.responseCode === 1004) {
              this.$message.error({
                duration: this.$store.state.duration,
                message: '请先登录后在关注该店铺',
                onClose: () => {
                  this.$router.push('/login')
                }
              })
            } else {
              this.$message.error({
                duration: this.$store.state.duration,
                message: res.responseMsg
              })
              this.loading = false
            }
          }).catch(err => {
            console.error(err)
            this.loading = false
          })
        } else {
          return false
        }
      } else {
        this.$message.error({
          duration: this.$store.state.duration,
          message: '请先登录！',
          onClose: () => {
            this.$router.push('/login')
          }
        })
      }
    },
    // 取消关注店铺
    unfollow (store) {
      if (!this.loading) {
        this.loading = true
        this.$http.post(this.$api + '/pc/product/addOrDeleteStore', {
          storeId: store.id,
          type: 2 // 判断是否已关注，Type枚举：{1: 关注； 2: 取消关注}
        }).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              duration: this.$store.state.duration,
              message: res.responseMsg,
              onClose: () => {
                this.getStoreList().then(() => {
                  this.loading = false
                })
              }
            })
          } else {
            this.$message.error({
              duration: this.$store.state.duration,
              message: res.responseMsg
            })
            this.loading = false
          }
        }).catch(err => {
          console.error(err)
          this.loading = false
        })
      } else {
        return false
      }
    },
    // 进入店铺
    goToStore (storeId) {
      const {href} = this.$router.resolve({
        name: '店铺详情',
        query: {
          storeId: storeId
        }
      })
      window.open(href, '_blank')
    },
    // 切换页面
    pageChange (pg) {
      this.page = pg
      this.init()
    }
  },
  watch: {
    '$route': function () {
      this.noScreen = Boolean(this.$route.query.screen)
      this.productName = this.$route.query.pname || ''
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.empty-page {
  padding: 100px 0 300px;
  text-align: center;
  img {
    margin-bottom: 20px;
    display: inline-block;
  }
  .text {
    font-size: 24px;
    color: $f_sub;
  }
}
.screen-wrapper {
  margin-top: 15px;
  background: #ffffff;
  border: solid 1px $border_color;
  border-bottom: 0;
  .screen-box {
    padding: 20px 20px 0;
    border-bottom: solid 1px $border_color;
    .attr-tit {
      float: left;
      width: 58px;
    }
    .attr-list {
      float: left;
      margin-left: 20px;
      margin-right: 20px;
      width: 900px;
      max-height: 84px;
      overflow: hidden;
      .attr-item {
        display: inline-block;
        margin-right: 30px;
        margin-bottom: 20px;
        color: $f_main;
        .attr-name,
        .attr-checkbox {
          display: inline-block;
          height: 18px;
          overflow: hidden;
          cursor: pointer;
        }
      }
    }
    .btn-group {
      float: left;
      width: 160px;
      text-align: right;
    }
    .tool-bar {
      position: relative;
      top: -10px;
      clear: both;
      text-align: center;
    }
  }
}
.pro-grade-name {
  margin-top: 6px;
}
</style>
